<template>
  <div id="search">
    <!-- 搜索框 -->
    <div class="search-box" @click="startsearch">
      <div class="left" title="点击切换" @click="openChangeSE">
        <img :src="nowsrc" alt="" />
      </div>
      <input
        type="text"
        name=""
        id="search"
        v-model="store.keyword"
        @blur="clearsearch"
        @keyup="inputsearch"
        @enter="tosearch"
        :placeholder="store.searchshow ? '' : '想要知道点什么吗'"
        autocomplete="off"
      />
      <img
        src="/images/icon/del.svg"
        alt=""
        v-show="store.keyword"
        @click="delkeyword"
        class="delete"
      />
      <div class="right" @click="tosearch">
        <img src="/images/icon/search.svg" alt="" />
      </div>
    </div>
    <div class="search-list">
      <!-- 搜索引擎选择 -->
      <ul
        :class="[
          'onpull',
          'list',
          { show: store.changeSE && store.searchshow },
        ]"
      >
        <li
          v-for="(item, index) of store.SE_list"
          :title="item.name"
          :key="item.name"
          @click="changeSE(item.id)"
        >
          <img :src="`/images/icon/${item.icon}.svg`" alt="" />
        </li>
      </ul>
      <ul :class="['searchAdvice', 'onpull', { show: store.keyword }]">
        <!-- 翻译 -->
        <li
          class="Advicelist translate"
          @click="goTranslate"
          :class="{ active: currentindex == -1 }"
        >
          <img src="/images/icon/translate.svg" alt="" />
          <p>{{ store.keyword }}</p>
        </li>
        <!-- 搜索建议 -->
        <!-- <li class="Advicelist">

        </li> -->
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, h } from "vue";
import { homepage } from "@/store/index.js";
// import { getBaiduSuggest } from "@/api";
// 左右高宽相等
let equals = ref("40px");
let width = ref("500px");
// 公共仓库
let store = homepage();
// 当前搜索引擎
let nowSE = ref(null);
// 当前搜索路径
let nowsrc = ref(null);
// 当前索引
let currentindex = ref(null);
// 监听变化
store.$subscribe((mutation, state) => {
  nowSE.value = store.SE_list[store.SE_type];
  nowsrc.value = `/images/icon/${nowSE.value.icon}.svg`;
});

// 进入搜索状态
const startsearch = () => {
  store.Search();
};

// 发起请求,获取百度搜索栏
const inputsearch = async (e) => {
  switch (e.key) {
    case "Enter":
      tosearch();
      break;
    case "ArrowDown":
      if (currentindex.value == null) {
        currentindex.value = -1;
      } else {
        currentindex.value++;
      }
      break;
    case "ArrowUp":
      if (currentindex.value == -1) {
        currentindex.value = null;
      } else {
        if (currentindex.value !== null) {
          currentindex.value--;
        }
      }
      break;
    default:
      break;
  }
};

// 删除delete
const delkeyword = () => {
  store.$patch((state) => {
    store.keyword = "";
  });
};

// 开启搜索
const tosearch = () => {
  if (store.keyword !== "") {
    let baseUrl = nowSE.value.searchurl;
    window.open(`${baseUrl}${store.keyword}`);
    store.clearsearch();
  } else {
    ElMessage({
      message: "请输入后在进行搜索哦",
    });
  }
};

// 切换搜索引擎列表
const openChangeSE = () => {
  store.changeSE = !store.changeSE;
};

// 选择搜索引擎
const changeSE = (id) => {
  store.SE_type = id;
  store.changeSE = false;
};

// 跳转翻译页
const goTranslate = () => {
  window.open(`https://fanyi.baidu.com/?aldtype=16047#zh/en/${store.keyword}`);
};
</script>

<style lang="scss" scoped>
#search {
  position: relative;
}

.search-box {
  align-self: center;
  box-shadow: 0 0 10px 3px #0000001a;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  border-radius: 20px;
  width: 500px;
  display: flex;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  @media (max-width: 720px) {
    width: 300px;
  }
  input {
    height: v-bind(equals);
    flex: 1;
    color: black;
    font-size: 15px;
    transition: 00.5s;
  }
  .delete {
    cursor: pointer;
  }
  .left,
  .right {
    width: v-bind(equals);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
    &:hover {
      background: rgba(255, 255, 255, 0.7);
    }
  }
}

.search-list {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
  font-size: 13px;
  .list {
    display: flex;
    &.show {
      padding: 10px;
    }
    & li {
      padding: 10px 11px 8px 11px;
      margin-right: 20px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
      &:hover {
        background: rgba(255, 255, 255, 1);
      }
    }
  }
  .searchAdvice {
    background: rgba(255, 255, 255, 0.5);
    // padding: 0px 10px;
    .Advicelist {
      height: 30px;
      display: flex;
      align-items: center;
      color: black;
      cursor: pointer;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        padding-left: 10px;
      }
      &.active {
        background: rgba(255, 255, 255, 0.3);
        padding-left: 10px;
      }
      img {
        margin-left: 10px;
        margin-right: 5px;
      }
      p {
        // 多段文档隐藏
        word-break: break-all;
        overflow: hidden;
        // 溢出转换省略号
        text-overflow: ellipsis;
        // 将盒子转换成一个基于webkit的盒子
        display: -webkit-box;
        // 盒子对象子元素的排列方式为垂直排列
        -webkit-box-orient: vertical;
        // 设置第几行转换小数点
        -webkit-line-clamp: 1;
      }
    }
  }
}

.onpull {
  overflow: hidden;
  height: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.15s;
  box-shadow: 0 0 10px 3px #0000001a;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}

// 过渡效果
.show {
  transform: scaleY(1);
  margin: 5px 0;
  height: auto;
}
// 移动端适配
.onsearch .search-box {
  width: 600px !important;
  @media (max-width: 720px) {
    width: 350px !important;
  }
}
</style>
